<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <el-row>
              <el-button type="primary" size="small" @click="dialogVisible=true">新增角色</el-button>
            </el-row>
            <el-table :data="list" style="width: 100%;margin-top:15px" border>
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="名称" width="180">
              </el-table-column>
              <el-table-column prop="description" label="描述">
              </el-table-column>
              <el-table-column prop="xxx" label="操作">
                <template v-slot="{row}">
                  <el-button size="small" type="success" @click="onOpenAssignPermDialog(row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="onUpdate(row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="onDelete(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
              <el-pagination
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="onPageChange"
              >
              </el-pagination>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <el-alert title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改" type="info" show-icon :closable="false">
            </el-alert>
            <el-form label-width="100px" style="width:500px; margin-top:15px">
              <el-form-item label="公司名称">
                <el-input v-model="form.name" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="form.companyAddress" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.mailbox" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remarks" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <add-role ref="addRoleRef" :dialog-visible.sync="dialogVisible" @success="getRoles"></add-role>
    <!-- 分配权限弹窗 -->
    <el-dialog title="分配权限" width="50%" :visible.sync="assignPermDialogVisible">
      <el-tree ref="permRef" :data="permList" :props="{label:'name'}" default-expand-all show-checkbox node-key="id" check-strictly>
      </el-tree>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="onAssignPerm">确定</el-button>
        <el-button @click="assignPermDialogVisible = false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyInfo, getRoles, deleteRoles, getRolesDetail, assignPrem } from '@/api/setting'
import AddRole from './components/add-role.vue'
import { translateListToTree } from '@/utils'
import { getPermissionList } from '@/api/permisson'
export default {
  name: 'SettingPage',
  components: { AddRole },
  data() {
    return {
      activeName: 'first',
      dialogVisible: false,
      list: [],
      form: {},
      page: {
        page: 1,
        pagesize: 3,
        total: 0
      },
      assignPermDialogVisible: false,
      permList: [],
      permIds: [],
      currentId: undefined
    }
  },
  async created() {
    this.form = await getCompanyInfo(this.$store.state.user.userInfo.companyId)
    this.getRoles()
    // 获取权限列表数据
    this.permList = translateListToTree(await getPermissionList(), '0')
  },
  mounted() {
  },
  methods: {
    async getRoles() {
      const { total, rows } = await getRoles(this.page)
      this.list = rows
      this.page.total = total
    },
    // 编辑按钮
    async onUpdate(id) {
      await this.$refs['addRoleRef'].getRolesDetail(id)
      this.dialogVisible = true
    },
    // 删除按钮
    onDelete(id) {
      this.$confirm('确认删除该角色吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await deleteRoles(id)
        this.$message.success('删除成功')
        this.getRoles()
      }).catch(() => { })
    },
    // 分页改变事件
    onPageChange(page) {
      this.page.page = page
      this.getRoles()
    },
    async onOpenAssignPermDialog(id) {
      const { permIds } = await getRolesDetail(id)
      this.currentId = id
      this.assignPermDialogVisible = true
      await this.$nextTick()
      this.$refs.permRef.setCheckedKeys(permIds)
    },
    async onAssignPerm() {
      await assignPrem({
        id: this.currentId,
        permIds: this.$refs.permRef.getCheckedKeys()
      })
      this.$message.success('操作成功')
      this.assignPermDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
